<template>
  <div class="data-analysis-container">
    <!-- 筛选区域 -->
    <el-card class="filter-card">
      <el-form :model="queryParams" :inline="true" class="filter-form">
        <!-- 监测点名称 -->
        <el-form-item label="监测点名称">
          <el-select
            v-model="queryParams.monitorPointName"
            placeholder="请选择监测点"
            style="width: 120px"
          >
            <el-option label="1#监测点" value="point1"></el-option>
            <el-option label="2#监测点" value="point2"></el-option>
          </el-select>
        </el-form-item>

        <!-- 监测因子 -->
        <el-form-item label="监测因子">
          <el-select
            v-model="queryParams.monitorFactor"
            placeholder="请选择监测因子"
            style="width: 120px"
          >
            <el-option label="氨氮" value="nh3n"></el-option>
            <el-option label="高锰酸盐指数" value="codmn"></el-option>
          </el-select>
        </el-form-item>

        <!-- 起始监测时间 -->
        <el-form-item label="起始监测时间">
          <el-date-picker
            v-model="queryParams.startTime"
            type="datetime"
            placeholder="选择监测时间"
            style="width: 180px"
          />
        </el-form-item>

        <!-- 终止监测时间 -->
        <el-form-item label="终止监测时间">
          <el-date-picker
            v-model="queryParams.endTime"
            type="datetime"
            placeholder="选择监测时间"
            style="width: 180px"
          />
        </el-form-item>

        <!-- 搜索/重置按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset" style="margin-left: 8px"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 图表区域 -->
    <el-card class="chart-card">
      <div class="chart-title">
        {{ queryParams.monitorPointName || "1#" }}监测点数据图
      </div>
      <div ref="chartRef" class="chart-container"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 需确保项目已安装echarts（npm i echarts@5.x）

export default {
  name: "DataAnalysis", // 组件名称
  components: {},
  data() {
    return {
      // 筛选参数
      queryParams: {
        monitorPointName: "point1", // 默认选中1#监测点
        monitorFactor: "",
        startTime: "",
        endTime: "",
      },
      chartInstance: null, // ECharts实例
      // 模拟图表数据（实际项目替换为接口返回数据）
      chartData: {
        xAxis: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
        series: [2.1, 2.3, 2.0, 2.2, 2.4, 2.1],
      },
    };
  },
  mounted() {
    // 初始化图表
    this.initChart();
    // 监听窗口 resize 重绘图表
    window.addEventListener("resize", this.handleChartResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleChartResize);
    // 销毁ECharts实例
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    // 初始化ECharts图表
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chartRef);
      // 设置图表配置
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.chartData.xAxis,
        },
        yAxis: {
          type: "value",
          min: 0,
          axisLabel: {
            formatter: "{value}", // 可根据监测因子调整单位，比如"{value} mg/L"
          },
        },
        series: [
          {
            data: this.chartData.series,
            type: "line",
            smooth: true,
            lineStyle: { width: 2 },
            itemStyle: { color: "#409eff" },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },

    // 更新图表（根据筛选条件请求数据后重绘）
    updateChart() {
      if (!this.chartInstance) return;

      // 实际项目中：调用接口获取对应监测点/因子/时间范围的数据，替换下面的模拟数据
      const mockData = {
        xAxis: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
        series: [2.1, 2.3, 2.0, 2.2, 2.4, 2.1],
      };

      // 更新图表配置
      const option = {
        xAxis: { data: mockData.xAxis },
        series: [{ data: mockData.series }],
        yAxis: {
          axisLabel: {
            // 根据监测因子动态设置单位
            formatter: this.queryParams.monitorFactor
              ? `{value} ${
                  this.queryParams.monitorFactor === "nh3n" ? "mg/L" : "mg/L"
                }`
              : "{value}",
          },
        },
      };
      this.chartInstance.setOption(option);
    },

    // 搜索按钮触发
    handleSearch() {
      this.updateChart();
    },

    // 重置筛选条件
    handleReset() {
      this.queryParams = {
        monitorPointName: "point1",
        monitorFactor: "",
        startTime: "",
        endTime: "",
      };
      // 重置后显示默认数据
      this.updateChart();
    },

    // 窗口 resize 时重绘图表
    handleChartResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.data-analysis-container {
  padding: 15px;
  background-color: #f9f9f9;
  min-height: calc(100vh - 20px);

  // 筛选区域卡片
  .filter-card {
    margin-bottom: 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    .filter-form {
      .el-form-item {
        margin-right: 15px;
        margin-bottom: 0;
      }

      .el-form-item__label {
        color: #666;
        font-weight: 500;
      }
    }
  }

  // 图表区域卡片
  .chart-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    .chart-title {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
      padding-left: 5px;
    }

    .chart-container {
      width: 100%;
      height: 400px; // 图表高度，可根据需求调整
    }
  }
}
</style>
